<template>
    <div class="billists">
        <sticky>
            <section class="topsticky">
                <span class="selectspan" @click="showPopupPicker=true">{{intervals[intervalindex].name}}
                    <icon scale="2" name="down"/></span>
                <div class="lfex1">
                    <tab>
                        <tab-item v-for="(item,index) in tabs" @on-item-click="tabchanges(index)"
                                  :selected="sindex===index" :key="index">
                            {{item.name}}
                        </tab-item>
                    </tab>
                </div>

            </section>
        </sticky>

        <section class="detailscontainer">
            <scroller :on-refresh="refresh"
                      :on-infinite="infinite"
            >
                <div class="itemdiv" v-for="(item,index) in tabs" v-show="sindex===index">
                    <ul class="listcon" v-if="item.items.length>0">
                        <li v-for="(itemc,cindex) in item.items">
                            <span class="topspan">
                                <strong>{{itemc.type.name}}</strong>
                                <b>{{itemc.type.type===0?'-':'+'}}{{itemc.value}}</b>
                            </span>
                            <span class="bottomspan">
                                <b class="first">{{itemc.create}}</b>
                                <b>余额：{{itemc.balance}}</b>
                            </span>
                        </li>
                    </ul>
                </div>
            </scroller>
        </section>
        <popup-picker :show.sync="showPopupPicker" @on-change="onChange" :show-cell="false"
                      title="TEST"
                      :data="[intervals]"></popup-picker>
    </div>
</template>

<script>
    import {Tab, TabItem, Sticky, PopupPicker} from 'vux';
    import {getMytoken} from '../../service/common';
    import {getDetailsTabsR, getDetailsInfoR} from '../../service/details';
    import {findIndex, propEq, concat, clone} from 'ramda';
    import {delay} from '../../uitls/common';
    export default {
        components: {
            Tab, TabItem, Sticky, PopupPicker
        },
        data() {
            return {
                tabs: [],
                sindex: 0,
                intervalindex: 3,
                intervals: [
                    {name: '当天', value: 1},
                    {name: '最近一周', value: 2},
                    {name: '最近一月', value: 3},
                    {name: '最近三月', value: 4}
                ],
                showPopupPicker: false
            };
        },
        created() {
            this.getTabs(); //初始化tabs
        },
        computed: {},
        methods: {
            async onChange(value){
                const {intervals, sindex, tabs}=this;
                this.intervalindex = findIndex(propEq('value', parseInt(value[0])), intervals);
                const code = tabs[sindex].code;
                const interval = intervals[this.intervalindex].value;
                await this.getDetailsinfo({page: 1, code, interval});
            },
            async infinite(done){
                await delay(1000);
                const {sindex, tabs, intervals, intervalindex}=this;
                if(tabs.length === 0) {
                    return;
                }
                tabs[sindex].page = tabs[sindex].page + 1;
                const code = tabs[sindex].code;
                const interval = intervals[intervalindex].value;
                const over = await this.getDetailsinfo({
                    page: tabs[sindex].page,
                    loadermore: true,
                    code,
                    interval
                });
                if(over) {
                    tabs[sindex].page = tabs[sindex].page - 1;
                    done(true);
                    return;
                }
                done();
            },
            async refresh(done){
                await delay(1000);
                const {intervals, sindex, tabs, intervalindex}=this;
                const code = tabs[sindex].code;
                const interval = intervals[intervalindex].value;
                await this.getDetailsinfo({page: 1, code, interval});
                done();
            },
            async getTabs(){
                const {sindex, intervals, intervalindex}=this;
                const {data}= await getDetailsTabsR();
                if(data && data.code === 0) {
                    this.tabs = data.data.values;
                    this.tabs.map((e, i)=> {
                        e.page = 1;
                        e.items = [];
                    });
                    if(this.tabs[sindex].items.length === 0) {

                        let interval = intervals[intervalindex].value;
                        this.getDetailsinfo({
                            page: 1,
                            code: this.tabs[sindex].code,
                            loadermore: true,
                            interval
                        });
                    }
                }
                else {
                    this.$vux.toast.text(data.msg);
                }
            },
            async tabchanges(index){
                this.sindex = index;
                const sindex = index;
                const {intervals, tabs, intervalindex}=this;
                const code = tabs[sindex].code;
                const interval = intervals[intervalindex].value;
//                if(tabs[sindex].items.length > 0) {
//                    return;
//                }
                await this.getDetailsinfo({page: 1, code, interval});
            },
            async getDetailsinfo({page, loadermore, code = '', interval}){
                const {tabs, sindex}=this;
                const {token}=await getMytoken();
                const {data}= await getDetailsInfoR({page, code, interval, token});
                if(data && data.code === 0) {
                    if(loadermore) {
                        if(data.data.values.length === 0) {
                            return true;
                        }
                        else {
                            this.tabs[sindex].items = concat(tabs[sindex].items, data.data.values);
                        }
                    }
                    else {
                        this.tabs[sindex].page = 1;
                        this.tabs[sindex].items = data.data.values;
                    }
                    this.tabs = clone(this.tabs);
                }
                else {
                    this.$vux.toast.text(data.msg);
                    return true;
                }
            }
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    @import "../app";

    .billists {
        height: 100%;
        display: flex;
        flex: 1;
        flex-direction: column;
        overflow: hidden;
        .detailscontainer {
            flex: 1;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: scroll;
        }
    }

    .topsticky {
        display: flex;
        background: #fff;
        box-sizing: border-box;
        .selectspan {
            width: 190px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: 1px solid @color12;
            font-size: @fz28;
            color: @color3;
            position: relative;
            &::after {
                position: absolute;
                right: 0;
                height: 44px;
                border-right: 1px solid @color12;
                content: ' ';
            }
            svg {
                /*width: 22px;*/
                /*height: 17px;*/
            }
        }
        .lfex1 {
            flex: 1;
        }
    }

    .listcon {
        li {
            height: 122px;
            box-sizing: border-box;
            border-bottom: 1px solid @color12;
            background: #fff;
            padding: 0 24px 0 32px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            span {
                display: flex;
                align-items: center;
            }
            .topspan {
                font-size: @fz32;
                font-weight: bolder;
                strong {
                    flex: 1;
                }
                b {
                    color: @color22;
                }

            }
            .bottomspan {
                b {
                    font-size: @fz24;
                    color: @color3;
                }
                .first {
                    flex: 1;
                }

            }
            &:last-child {
                border: none;
            }
        }
    }
</style>